<template>
    <div>
        <div class="container" :style="{width:screenWidth,height:screenHeight}">
            <div class="login">
                <div class="header">
                    <div class="logo"><img src="../../assets/images/authlogo.jpg" alt=""></div>
                    <div class="back-btn"><a href="/#/">首页</a><a href="/#/auth/register">注册</a></div>
                </div>
                <div class="main">
                    <div class="form-userInfo">
                        <div class="username">
                            <span class="label-user">{{emailText}}</span>
                            <el-input v-model.trim="username" :placeholder="placeholderU"  @focus="usernameFocus" ref="mark" @blur="usernameBlur" @keyup.native.enter ="login"></el-input>
                            <span class="error-tips-user">{{errors.username}}</span>
                        </div>
                        <div class="password">
                            <span class="label-pwd" >{{pwdText}}</span>
                            <el-input v-model.trim="password" :placeholder="placeholderP" class="" @focus="passwordFocus" @blur="passwordBlur" type="password"
                            @keyup.native.enter ="login"></el-input>
                            <span class="error-tips-user">{{errors.password}}</span>
                        </div>
                        <el-button type="primary" class="login-btn" @click="login">确认登录</el-button>
                    </div>
                    <div class="user-tools">
                        <el-checkbox v-model="remenber">记住密码</el-checkbox>
                        <a href="#" class="forget">忘记密码？</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Cookies from 'js-cookie'
import { Base64 } from 'js-base64';
import { Message, MessageBox } from 'element-ui'
export default {
    name:'login',
    data(){
        return {
            screenWidth:'',
            screenHeight:'',
            username:'',
            password:'',
            placeholderU:'邮箱',
            placeholderP:'密码',
            emailText:'',
            pwdText:'',
            remenber:true
        }
    },
    mounted(){
        this.screenWidth = `${document.documentElement.clientHeight}px`
        this.screenWidth = `${document.documentElement.clientWidth}px`
        this.$refs.mark.$el.querySelector('input').focus()
        window.addEventListener('resize',this.onresize)   
    },
    created(){
        if(Cookies.get('nextLoginInfo')){
            let userInfo = JSON.parse(Base64.decode(Cookies.get('nextLoginInfo')))
            this.username = userInfo.password
            this.password = userInfo.password
        }else{
            return 
        }
    },
    computed:{
        errors(){
          return this.$vuerify.$errors;   //错误信息
        },
    },
    vuerify:{
        username:{
            test:/^[a-zA-Z0-9_-]{4,16}$/,
            message: '账号至少4-6位'
       },
       password:{
            test:/^.*(?=.{4,})(?=.*[a-z]).*$/,
            message: '最少4位，包括至少1个小写字母'
       }
    },
    methods:{
        onresize(){
            setTimeout( ()=> {
                this.screenHeight = `${document.documentElement.clientHeight}px`
                this.screenWidth = `${document.documentElement.clientWidth}px`
            }, 100)
        },
        usernameFocus(){
            this.$nextTick(()=>{
                this.placeholderU = ''
                 this.emailText = '邮箱'
            })
           
        },
        usernameBlur(){
            this.$nextTick(()=>{
                this.placeholderU = '邮箱'
                this.emailText = ''
            })
        },
        passwordFocus(){
            this.$nextTick(()=>{
                this.placeholderP = ''
                this.pwdText ='密码'
            })
        },
        passwordBlur(){
             this.$nextTick(()=>{
                this.placeholderP = '密码'
                this.pwdText =''
            })
        },
        //登录事件
        login(){
            console.log(1)
            if(this.$vuerify.check()){
                let userInfo = {
                    username:this.username,
                    password:this.password,
                }
                //记住密码账号
                if(this.remenber){
                    Cookies.set('nextLoginInfo',Base64.encode(JSON.stringify(userInfo)),7)
                }else{
                    Cookies.remove('nextLoginInfo')
                }
                //获取用户token
                this.$store.dispatch('LOGIN',userInfo).then(()=>{
                    if(Cookies.get('x-token')){
                        let token = Cookies.get('x-token')
                        //获取用户信息
                        this.$store.dispatch('GETUSERINFO', token)
                        Message({
                            message:'登录成功，正在跳转',
                            type:'success',
                            duration: 1000
                        })

                        if(window.location.href.split('?')[1]){
                            var redirectURL = window.location.href = decodeURIComponent(window.location.href.split('?')[1].split('=')[1])
                        }else{
                            var redirectURL = '/#/dashboard'
                        }
                        setTimeout(()=>{
                            window.location.href = redirectURL
                        },1000)
                    }
                })
            }
        }
    },
}
</script>
<style lang="stylus" scoped>
    .container{
        background #f8f9fe
        background-size 100% 100%
        width 100%;
        height 100%;
        position fixed
    }

    .login{
        width 500px
        height 560px
        border 1px solid rgba(0,0,0,.1)
        margin 10% auto
        border-radius 20px
        box-shadow 1px 2px 3px rgba(0,0,0,.1)
        background #fff
    }
    .header{
        height 150px
        width 100%
        background #bbdefb
        overflow hidden
        border-radius 20px 20px 0 0
    }
    .header .logo {
        width 120px
        height 120px
        margin 0 auto
    }
    .header .logo img{
        width 120px
        margin-top 35px
        border-radius 100%
    }
    .header .back-btn{
        display flex
        align-items center
        justify-content space-between
    }
    .header .back-btn a {
        display inline-block
        width 100px
        height 30px
        line-height 30px
        text-align center
        background #54aff9
        color #ffffff
        border-radius 5px
        cursor pointer
    }
    .main{
        width 80%
        margin 46px auto
    }
    .form-userInfo .username{
        height 88px
    }
    .form-userInfo .label-user{
        color #54aff9
        display block
        padding-bottom 5px
        font-size 14px
        height 20px
        line-height 20px
    }
    .form-userInfo .label-pwd{
        color #54aff9
        padding-bottom 5px
        font-size 14px
        display block
        height 20px
        line-height 20px
    }
    .form-userInfo .error-tips-user{
       
        height 20px
        display block
        font-size 12px
        color red
    }
    .form-userInfo .password{
        margin-top 0px
        height 88px
    }
    .form-userInfo .login-btn{
        width 100%
        margin-top 40px
    }
    .user-tools{
        margin-top 10px
    }
    .user-tools .forget {
        font-size 14px
        margin-left 200px
    }
   

</style>